<template>
  <div>
    <!-- 登录框 -->

    <el-dialog :width="500" draggable="true" class="dialogVisible" style="border-radius: 10px"
      :model-value="isShowDrawer || store.uselogin" :before-close="closeDrawer">
      <template #header>
        <!-- <div class="xx"></div> -->
        <span class="dialog-header">
          <button class="LoGoTop">
            <img src="../../assets/newimg/logo.png" style="width: 100%; height: 100%" />
          </button>
        </span>
      </template>
      <!-- tab切换 -->
      <div style="width: 420px;margin: 0 auto;">
        <el-tabs v-model="activeName1" class="demo-tabs" @tab-click="handleClick">
          <el-tab-pane label="验证码登录" name="first" style="font-size: 16px">
            <!-- 未注册的手机号码将自动注册为用户  -->
            <div class="title_1">未注册的手机号码将自动注册为用户</div>

            <!-- 手机号码 -->
            <div class="phone">
              <img src="../../assets/newimg/phone.png" style="width: 14px; height: 14px; margin-right: 4px" />
              <span class="tel">手机号码</span>
            </div>
            <!-- from表单 -->
            <el-form :model="form" :rules="rules" ref="ruleFormRef">
              <!--  -->
              <el-form-item prop="tel">
                <el-input v-model="form.tel" class="input_shuru" placeholder="请填写手机号码" />
              </el-form-item>

              <!-- 滑动验证 -->
              <!-- <slider-vfc :height="50" :width="420" tip-txt="请按住滑块，向右拖动滑块"  @statu="slide" /> -->
              <newSlider v-if="isShowDrawer || store.uselogin" ref="newSliderRef"></newSlider>

              <div class="phone">
                <img src="../../assets/img/yzmok.png" style="width: 14px; height: 14px; margin-right: 4px" />
                <span class="tel">验证码</span>
              </div>

              <el-form-item class="poDing" prop="code">
                <el-input v-model="form.code" class="input_shuru" placeholder="请填写验证码" />
                <div class="inp_yzm" @click="countDown()"
                  :style="newSliderRef && newSliderRef.sliderSuccess && form.tel != '' ? '' : 'color:#e8e8e8'">
                  {{ content }}
                </div>
              </el-form-item>
              <el-form-item>
                <input placeholder="请输入邀请码（非必填）" style="
                    width: 420px;
                    height: 50px;
                    background: #ffffff;
                    border: 1px solid #dddddd;
                    border-radius: 4px;
                    padding-left: 10px;
                    outline: none;
                  " />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)" class="login_register"
                  style="margin-top: 20px">登录/注册</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>

          <el-tab-pane label="密码登录" name="second" style="font-size: 16px">
            <!-- 手机号码 -->
            <div class="phone">
              <img src="../../assets/newimg/phone.png" style="width: 14px; height: 14px; margin-right: 4px" />
              <span class="tel">手机号码</span>
            </div>

            <!-- from表单 -->
            <el-form :model="form" :rules="rules" ref="ruleFormRef1">
              <el-form-item prop="account">
                <el-input v-model="form.account" class="input_shuru" placeholder="请填写手机号码" />
              </el-form-item>

              <div class="phone">
                <img src="../../assets/img/psok.png" style="width: 14px; height: 14px; margin-right: 4px" />
                <span class="tel">密码</span>
              </div>

              <el-form-item class="poDing" prop="userpwd">
                <el-input v-model="form.userpwd" class="input_shuru" placeholder="请填写密码" type="password"
                  show-password />
              </el-form-item>

              <!-- 记住密码 -->
              <div style="display: flex; align-items: center;justify-content: space-between;">
                <div style="display: flex;align-items: center;">
                  <input type="checkbox" style="vertical-align: middle" />
                  <span style="margin-left: 6px;display: block;">记住密码</span>
                </div>
                <div class="password_no" @click="forgot()">忘记密码</div>
              </div>
              <!-- 记住密码 -->

              <el-form-item>
                <el-button type="primary" class="login_register" @click="submitForm1(ruleFormRef1)"
                  style="margin-top: 75px">
                  登录/注册
                </el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>

    <!-- 忘记密码 -->
    <el-dialog v-model="dialogVisible1" :width="500" :height="640" draggable="true" style="border-radius: 10px"
      modal="false">
      <template #header>
        <span class="dialog-header">
          <button class="LoGoTop">LoGo</button>
        </span>
      </template>
      <!-- tab切换 -->
      <div style="width: 420px;margin: 0 auto;">
        <img src="../../assets/img/Logo.png" style="width: 126px; height: 32px; margin: -40px 0 20px 40px" />
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
          <el-tab-pane label="找回密码" name="first">
            <!-- 手机号码 -->
            <div class="phone">
              <img src="../../assets/newimg/phone.png" style="width: 14px; height: 14px; margin-right: 4px" />
              <span class="tel">手机号码</span>
            </div>
            <!-- from表单 -->
            <el-form :model="form" :rules="rules" ref="ruleFormRef2">
              <el-form-item prop="tel">
                <el-input v-model="form.tel" class="input_shuru" placeholder="请填写手机号码" />
              </el-form-item>
              <div class="phone">
                <img src="../../assets/img/yzm.png" style="width: 14px; height: 14px; margin-right: 4px" />
                <span class="tel">验证码</span>
              </div>

              <el-form-item class="poDing" prop="code">
                <el-input v-model="form.code" class="input_shuru" placeholder="请填写验证码" />
                <div class="inp_yzm" @click="countDown()">
                  {{ content }}
                </div>
              </el-form-item>

              <div class="phone">
                <img src="../../assets/img/password.png" style="width: 14px; height: 14px; margin-right: 4px" />
                <span class="tel">密码</span>
              </div>
              <el-form-item prop="userpwd">
                <el-input v-model="form.userpwd" class="input_shuru" placeholder="请填写密码" show-password />
              </el-form-item>

              <el-form-item>
                <el-button type="primary" class="login_register" @click="submitForm2(ruleFormRef2)">
                  提交
                </el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
// import sliderVfc from '../../components/SliderVfc/index.vue'
import newSlider from '../../components/newSlider/index.vue'
import { ref, reactive, toRefs } from "vue";
import type { TabsPaneContext } from "element-plus";
import {
  getLogin,
  getLoginPassword,
  getCode,
  getforgotPassword,
} from "../../Api/login/login";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import CryptoJS from "crypto-js";
const router = useRouter();
const key = CryptoJS.enc.Utf8.parse("ysh425ptjhcpo781"); //十六位十六进制数作为密钥偏移量
const iv = CryptoJS.enc.Utf8.parse("53c5a64c6be84e97"); //十六位十六进制数作为密钥偏移量
const jiam = ref();
const newSliderRef = ref(null)
//加密
function encrypt(text) {
  return CryptoJS.AES.encrypt(text, key, {
    iv: iv,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7,
  }).toString();
}
// jiam.value = encrypt(`{"id":2,"name":"132139432"}`);

const jiem = ref();
//解密
function decrypt(text) {
  var result = CryptoJS.AES.decrypt(text, key, {
    iv: iv,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7,
  });
  return result.toString(CryptoJS.enc.Utf8);
}
// console.log(encrypt("89955214563"));

// console.log(decrypt("JtSctGrk2hGXBo7g3TtCIPovwQ7ju9RB8N7/Jt063kYMx73MDouX7AV5mR1zpLZyMOc26LfrtMrX6nfudc2IywJvDrR4KQWSOPXSC41rJ+iSqPTqAiAHfU6slHonLb2fYYTGRY6uKb0VfLr4B/YY/Q=="));

// pinia
import { useCounterStore } from "../../pain/login/login";
import { storeToRefs } from "pinia";
import { obtainAllFocusableElements } from 'element-plus/es/utils';
const store = useCounterStore();
const { vipw } = storeToRefs(store);
const { vip } = storeToRefs(store);
const { user } = storeToRefs(store);
const { userLogin } = storeToRefs(store);
const { vips } = storeToRefs(store); //普通会员
const { switchVip } = storeToRefs(store); //标准会员
const { vipMembers } = storeToRefs(store); //高级会员
const { platinum } = storeToRefs(store); //vip会员
const { diamond } = storeToRefs(store); //定制会员

//父传子弹框
const props = defineProps({
  isShowDrawer: Boolean,
});
const { isShowDrawer } = toRefs(props);
const emit = defineEmits(["closeDrawer"]);

// 关闭弹窗的方法
function closeDrawer() {
  emit("closeDrawer");
  if (ruleFormRef.value) {
    ruleFormRef.value.resetFields()
  }
  if (ruleFormRef1.value) {
    ruleFormRef1.value.resetFields()
  }
  if (ruleFormRef2.value) {
    ruleFormRef2.value.resetFields()
  }
  // if (newSliderRef.value) {
  //   newSliderRef.value.confirmSuccess = false;
  // }
  store.uselogin = false;
}
// 验证
const ruleFormRef = ref();
const ruleFormRef1 = ref();
const ruleFormRef2 = ref();

// 忘记密码
const dialogVisible1 = ref(false);

// tab切换
const activeName = ref("first");

// 忘记密码tab切换
const activeName1 = ref("first");
const handleClick = (tab: TabsPaneContext, event: Event) => {
  //   console.log(tab, event);
};

// 验证码
const content = ref("发送验证码"); // 按钮里显示的内容
const totalTime = ref(60); //记录具体倒计时时间
const canClick = ref(true);

//  登录 表单
const form = reactive({
  code: "", //验证码
  tel: "", //手机号
  userpwd: "", //密码
  account: "", //手机号
  clientid: "",
  level_id: "", //普通会员
  vipstart_time: "",
  expiration_time: "",
});

// 表单验证
const rules = reactive({
  tel: [
    { required: true, message: "请填写手机号", trigger: "blur" },
    {
      pattern: /^1[3456789]\d{9}$/,
      message: "手机号码格式不正确",
      trigger: "blur",
    },
  ],

  code: [{ required: true, message: "请填写验证码", trigger: "blur" }],

  account: [
    { required: true, message: "请填写手机号", trigger: "blur" },
    {
      pattern: /^1[3456789]\d{9}$/,
      message: "手机号码格式不正确",
      trigger: "blur",
    },
  ],

  userpwd: [{ required: true, message: "请填写密码", trigger: "blur" }],
});

// 获取验证码
const countDown = () => {
  if (!canClick.value) return;

  if (form.tel == '') {
    ElMessage.warning("请填写手机号");
    return
  }
  if (newSliderRef.value && newSliderRef.value.sliderSuccess == false && activeName1.value == 'first') {
    return ElMessage.warning("请先通过滑块验证");
  }
  getCode(form).then((res) => {
    // console.log(res);
    if (res.data.code != 1) {
      ElMessage.error(res.data.msg);
      // 存加密token
      let token = res.data.data;
      jiam.value = token;
      window.localStorage.setItem("token", jiam.value);
    } else {
      ElMessage({
        message: res.data.msg,
        type: "success",
      });
    }
  });

  canClick.value = false;
  content.value = totalTime.value + "s后重新发送";
  let clock = window.setInterval(() => {
    totalTime.value--;
    content.value = totalTime.value + "s后重新发送";
    if (totalTime.value < 0) {
      window.clearInterval(clock);
      content.value = "重新发送验证码";
      totalTime.value = 60;
      canClick.value = true;
    }
  }, 1000);
};

// 判断vip的等级
function V() {
  window.location.reload();
  if (localStorage.getItem("token")) {
    // console.log(localStorage.getItem("token"));

    const to = JSON.parse(decrypt(localStorage.getItem("token")));
    vipw.value = false;
    vip.value = true;
    user.value = true;
    userLogin.value = false;
    vips.value = true;

    if (to.level_id == 2) {
      switchVip.value = true;
    } else if (to.level_id == 3) {
      vipMembers.value = true;
      switchVip.value = false;
      vips.value = false;
    } else if (to.level_id == 4) {
      vipMembers.value = false;
      switchVip.value = false;
      platinum.value = true;
      vips.value = false;
    } else if (to.level_id == 5) {
      vipMembers.value = false;
      switchVip.value = false;
      platinum.value = false;
      vips.value = false;
      diamond.value = true;
    }
  } else {
    vipw.value = true;
    vip.value = false;
    user.value = false;
    userLogin.value = true;
    vips.value = false;
  }
}

// 注册登录确定
const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      getLogin(form).then((res) => {
        if (res.data.code != 1) {
          ElMessage.error(res.data.msg);
        } else {
          ElMessage({
            message: res.data.msg,
            type: "success",
          });
          // 关闭弹框
          closeDrawer();

          // 存加密token
          let token = res.data.data;

          jiam.value = token;
          // console.log(encrypt(res.data.data));
          // console.log(decrypt('9wDB6qXlJIJ5W8COAy061c9zSnrWhkTA44pbRWUYhgrdeGcIBfKL7lqMz0hOwyiSiZF0PMB5mRJM1z07gwWZiLmbWBwNW3EkRo8hPPK/2SI4KfgRLGjLzBe9KoxSH0qT1tlEtW17ThefFSVIYbSlrnAzP7t+YCZ4++RDDeRm5X+vJtT3XVHz0q/bNJSq5/ICPpsJT+tZj7vFocnZ09imeg=='));
          window.localStorage.setItem("token", jiam.value);

          // 清空表单
          ruleFormRef.value.resetFields();

          V();
        }
      });
    }
  });
};

// 密码登录确定
const submitForm1 = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      getLoginPassword(form).then((res) => {
        console.log(res);
        if (res.data.code != 1) {
          ElMessage.error(res.data.msg);
        } else {
          ElMessage({
            message: res.data.msg,
            type: "success",
          });
          // 存加密token
          let token = res.data.data;
          jiam.value = token;
          window.localStorage.setItem("token", jiam.value);

          // 关闭弹框
          closeDrawer();
          // 跳转
          // router.push("/");
          // 清空表单
          ruleFormRef.value.resetFields();
          // 图片判断
          // if (localStorage.getItem("token")) {
          //   const to = JSON.parse(token);
          //   vipw.value = false;
          //   vip.value = true;
          //   user.value = true;
          //   vips.value = true;
          //   userLogin.value = false;
          //   if (to.level_id == 2) {
          //     switchVip.value = true;
          //   } else if (to.level_id == 3) {
          //     vipMembers.value = true;
          //     switchVip.value = false;
          //     vips.value = false;
          //   } else if (to.level_id == 4) {
          //     vipMembers.value = false;
          //     switchVip.value = false;
          //     platinum.value = true;
          //     vips.value = false;
          //   } else if (to.level_id == 5) {
          //     vipMembers.value = false;
          //     switchVip.value = false;
          //     platinum.value = false;
          //     vips.value = false;
          //     diamond.value = true;
          //   }
          // } else {
          //   vipw.value = true;
          //   vip.value = false;
          //   user.value = false;
          //   userLogin.value = true;
          // }
          V();
          window.location.reload();
        }
      });
    }
  });
};

// 忘记密码提交
const submitForm2 = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      getforgotPassword(form).then((res) => {
        console.log(res);
        if (res.data.code != 1) {
          ElMessage.error(res.data.msg);
        } else {
          ElMessage({
            message: res.data.msg,
            type: "success",
          });
          // 关闭弹框
          closeDrawer();
          // 存加密token
          let token = res.data.data;
          jiam.value = token;
          window.localStorage.setItem("token", jiam.value);
          // 跳转
          // router.push("/");
          // 清空表单
          ruleFormRef.value.resetFields();
        }
      });
    }
  });
};

// 忘记密码弹框
const forgot = () => {
  closeDrawer();
  dialogVisible1.value = true;
};
</script>
<style scoped>
input[type=checkbox]:checked::after {
  width: 100%;
  height: 13px;
  line-height: 13px;
  content: "✓";
  color: #fff;
  font-size: 10px;
  text-align: center;
  border-radius: 2px;
  font-weight: bold;
  background-color: #F43107;
  display: block;
}
:deep(.el-tabs__item:hover){
  color: #F43107;
}
:deep(.el-tabs__item.is-active) {
  color: #F43107;
}

:deep(.el-tabs__active-bar) {
  background-color: #F43107;
}

.el-dialog__body {
  /* padding: 0 !important; */
}

/* tabs */
.deleteBorder .el-tabs__nav-wrap::after {
  height: 0 !important;
}

.deleteBorder .el-tabs__active-bar {
  background: transparent !important;
}

.mi-captcha-radar-logo {
  display: none;
}

/*去掉tabs底部的下划线*/
</style>
<style lang="scss" scoped>
:deep(.el-tabs__nav-wrap::after) {
  position: static;
}

/* input边框 */
:deep(.el-input__wrapper) {
  box-shadow: none !important;
  border-bottom: 1px solid #a9b1be;
  border-radius: 0 !important;
}

// 高度 tabls
:deep(.el-tabs__content) {
  margin-top: 10px;
}

.LoGoTop {
  width: 148px;
  height: 70px;
  background-color: #fff;
  border: 0;
  color: #fff;
  margin-top: 10px;
  margin-left: 20px;
}

// 返回登录
.black {
  margin-left: 185px;
  cursor: pointer;
  color: #6778ff;
}

.xx {
  width: 100%;
  height: 1px;
  border-bottom: 1px dotted #000;
}

// title内容
.title_1 {
  font-size: 14px;
  font-weight: 400;
  color: #a9b1be;
  margin-bottom: 50px;
}

// 手机号
.phone {
  display: flex;
  align-items: center;
  margin-top: 20px;

  .tel {
    width: 56px;
    height: 14px;
    font-size: 14px;
    font-weight: 400;
    color: #333333;
  }
}

// 输入框
.input_shuru {
  width: 420px;
  margin-top: 20px;
  border-top: 0;
  border-right: 0;
  border-left: 0;
  // border-bottom: 1px solid #a9b1be !important;
  outline: none;
  font-size: 16px;
  padding-bottom: 10px;
}

input::-webkit-input-placeholder {
  color: #a9b1be;
}

// 验证码
.poDing {
  position: relative;
}

.inp_yzm {
  color: #f43107;
  position: absolute;
  right: 0px;
  top: 20px;
  cursor: pointer;
}

// 滑块验证
.mi-captchas {
  margin: 5px 0;
}

.mi-captcha-modal-copyright {
  display: none;
}

.question-circle {
  display: none;
}

// 登录注册
.login_register {
  width: 420px;
  height: 50px;
  background: #f43107;
  opacity: 1;
  border-radius: 4px;
  border: 0;
}

//忘记密码
.password_no {
  // margin-left: 288px;
  color: #f43107;
  font-size: 14px;
  cursor: pointer;

  &:hover {
    text-decoration: underline;
  }
}

.login_register {
  background-color: #f43107;
  /* 设置按钮的颜色 */
  color: #fff;
}

/* 点击时保持颜色不变 */
.login_register:hover {
  color: #fff;
  background-color: #f43107 !important;
  /* 点击时保持颜色不变 */
}

/* 点击时保持颜色不变 */
.login_register:active {
  background-color: #f43107 !important;
  /* 点击时保持颜色不变 */
}

.login_register:focus {
  color: #fff;
  background-color: #f43107 !important;
  /* 点击时保持颜色不变 */
}
</style>
